﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Datepicker Reference</title>
<style type="text/css">
@import "css/jquery.tabs.css";
@import "css/jquery.bookmark.css";
@import "css/demo.css";
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.debug.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
<script type="text/javascript" src="js/jquery.bookmark.js"></script>
<script type="text/javascript" src="js/jquery.chili-2.0.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<h1>jQuery Datepicker Reference</h1>
<p>A <a href="http://jquery.com">jQuery</a> <a href="http://jquery.com/plugins/project/datepick">plugin</a>
	that attaches a popup calendar to your input fields or shows an
	inline calendar for selecting individual dates or date ranges.
	If you find this plugin useful please
	<a href="http://jquery.com/plugins/project/datepick">vote for it</a> on the jQuery site.</p>
<p>This page provides a documentation reference for working
	with the plugin <span class="version">v4.0.6</span>.
	<a href="zip/jquery.datepick.doc-4.0.6.zip" onclick="pageTracker._trackPageview('/downloads/datepick.doc-4.0.6');">
	Download a copy</a> for your own reference - just add jQuery JavaScript for full functionality.</p>
<p>For version <span class="version">3.7.5</span> and earlier please see the
	<a href="datepick375Ref.html">older documentation reference</a>
	as version 4.0.0 is a major update to the plugin.</p>
<p>See a <a href="datepick.html">demonstration</a> of the
	datepicker plugin and download the code from there.
	Or see a <a href="datepickBasics.html">minimal page</a> that you could
	use as a basis for your own investigations.</p>
<p style="text-align: center;"><span id="bookmark"></span></p>
<div id="tabs">
	<ul>
		<li><a href="#settings"><span>Settings</span></a></li>
		<li><a href="#commandsobj"><span>Commands</span></a></li>
		<li><a href="#l10n"><span>Localisation</span></a></li>
		<li><a href="#renderers"><span>Renderers</span></a></li>
		<li><a href="#globals"><span>Global</span></a></li>
		<li><a href="#datefns"><span>Date Functions</span></a></li>
		<li><a href="#extend"><span>Extensions</span></a></li>
		<li><a href="#validation"><span>Validation</span></a></li>
		<li><a href="#compat"><span>Compatibility</span></a></li>
	</ul>
	<div id="settings" class="feature">
		<h2><a name="settingsall">Datepicker Settings</a></h2>
		<p>A separate datepicker instance is created for each targetted control:
			<code class="js">$(selector).datepick();</code>.
			When applied to a <code>div</code> or <code>span</code> the datepicker
			is rendered inline. Otherwise it appears as a popup on demand.</p>
		<p>Each instance may have different settings, e.g.</p>
		<pre><code class="js">$(selector).datepick({minDate: new Date()});</code></pre>
		<p>Alternately, you can specify the settings per control by including the
			<a href="http://plugins.jquery.com/project/metadata">jQuery Metadata</a>
			plugin in your page and adding options to the <code>class</code> attribute, e.g.</p>
		<pre><code class="html">&lt;input type="text" class="{minDate: new Date()}"/&gt;</code></pre>
		<p>The datepicker functionality can only be applied once. Affected controls are flagged
			with the <code>hasDatepick</code> class and are not re-processed if targetted again.
			Use the <a href="#" onclick="jumpTo('globals', 'option');">option</a>
			command if you want to change settings after the initial setup.</p>
		<p>Below are the settings that may be applied to each datepicker instance.
			All are optional.</p>
		<hr>
		<p><em>A note on Date</em> - the JavaScript <code>Date</code> constructor expects
			the year, month, and day as parameters. However, the month ranges from 0 to 11.
			To make explicit what date is intended (does a month of 3 mean March or April?)
			I specify the month from 1 to 12 and manually subtract the 1.
			Thus the following denotes 25 December, 2010.</p>
		<pre><code class="js">$(selector).datepick({minDate: new Date(2010, 12-1, 25)});</code></pre>
		<hr>
		<p class="quickref">
			<a href="#alignment">alignment</a>&nbsp;|
			<a href="#altField">altField</a>&nbsp;|
			<a href="#altFormat">altFormat</a>&nbsp;|
			<a href="#autoSize">autoSize</a>&nbsp;|
			<a href="#calculateWeek">calculateWeek</a>&nbsp;|
			<a href="#changeMonth">changeMonth</a>&nbsp;|
			<a href="#commands">commands</a>&nbsp;|
			<a href="#commandsAsDateFormat">commandsAsDateFormat</a>&nbsp;|
			<a href="#constrainInput">constrainInput</a>&nbsp;|
			<a href="#defaultDate">defaultDate</a>&nbsp;|
			<a href="#fixedWeeks">fixedWeeks</a>&nbsp;|
			<a href="#maxDate">maxDate</a>&nbsp;|
			<a href="#minDate">minDate</a>&nbsp;|
			<a href="#monthsOffset">monthsOffset</a>&nbsp;|
			<a href="#monthsToJump">monthsToJump</a>&nbsp;|
			<a href="#monthsToShow">monthsToShow</a>&nbsp;|
			<a href="#monthsToStep">monthsToStep</a>&nbsp;|
			<a href="#multiSelect">multiSelect</a>&nbsp;|
			<a href="#multiSeparator">multiSeparator</a>&nbsp;|
			<a href="#onChangeMonthYear">onChangeMonthYear</a>&nbsp;|
			<a href="#onClose">onClose</a>&nbsp;|
			<a href="#onDate">onDate</a>&nbsp;|
			<a href="#onSelect">onSelect</a>&nbsp;|
			<a href="#onShow">onShow</a>&nbsp;|
			<a href="#pickerClass">pickerClass</a>&nbsp;|
			<a href="#popupContainer">popupContainer</a>&nbsp;|
			<a href="#rangeSelect">rangeSelect</a>&nbsp;|
			<a href="#rangeSeparator">rangeSeparator</a>&nbsp;|
			<a href="#selectDefaultDate">selectDefaultDate</a>&nbsp;|
			<a href="#selectOtherMonths">selectOtherMonths</a>&nbsp;|
			<a href="#shortYearCutoff">shortYearCutoff</a>&nbsp;|
			<a href="#showAnim">showAnim</a>&nbsp;|
			<a href="#showOnFocus">showOnFocus</a>&nbsp;|
			<a href="#showOptions">showOptions</a>&nbsp;|
			<a href="#showOtherMonths">showOtherMonths</a>&nbsp;|
			<a href="#showSpeed">showSpeed</a>&nbsp;|
			<a href="#showTrigger">showTrigger</a>&nbsp;|
			<a href="#useMouseWheel">useMouseWheel</a>&nbsp;|
			<a href="#yearRange">yearRange</a>
		</p>
		<table border="0">
		<tr><th>Name</th><th>Type</th><th>Default</th><th>Comments</th></tr>
		<tr><td><a name="pickerClass"></a>pickerClass</td><td>string</td><td>''</td>
			<td>Any extra CSS class(es) to add to this datepicker instance.
				By specifying a unique class you can individually target
				datepicker instances with special styling.<br><br>
				<pre><code class="js">$(selector).datepick({pickerClass: 'my-picker'});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="showOnFocus"></a>showOnFocus</td><td>boolean</td><td>true</td>
			<td>When <code>true</code> a popup datepicker appears for an input
				field when it gains focus. When <code>false</code> you should
				specify a <a href="#showTrigger"><code>showTrigger</code></a> instead.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				incorporated into <code>showOn</code>.</td></tr>
		<tr><td><a name="showTrigger"></a>showTrigger</td><td>string or element or jQuery</td><td>null</td>
			<td>The element(s) that will trigger a popup datepicker to appear
				when they are clicked. You can provide either the element itself,
				a jQuery collection containing the element, a string selector for
				the desired element, or a string version of the element.
				The trigger is cloned and placed after the input field (taking
				<a href="#" onclick="jumpTo('l10n', 'isRTL');">
				right-to-left</a> languages into account).<br><br>
				<pre><code class="js">$(selector).datepick({showTrigger:
    '&lt;img src="img/calendar.gif" alt="Popup" class="trigger">'});
$(selector).datepick({showTrigger: '#myicon'});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously you used
				<code>showOn</code>, <code>buttonText</code>, <code>buttonImage</code>,
				and <code>buttonImageOnly</code>.</td></tr>
		<tr><td><a name="showAnim"></a>showAnim</td><td>string</td><td>'show'</td>
			<td>The name of the animation to use when a popup datepicker appears
				and disappears. The value can be one of the standard animations -
				'show', 'fadeIn', or 'slideDown' - or any of the
				<a href="http://docs.jquery.com/UI/Effects">jQuery UI effects</a>
				(provided you have included the appropriate plugin).
				Set this to '' for no animation.<br><br>
				<pre><code class="js">$(selector).datepick({showAnim: 'fadeIn'});
$(selector).datepick({showAnim: 'clip'});
$(selector).datepick({showAnim: ''}); // Immediate</code></pre><br>
				<span class="version">Since 3.7.3</span> - '' for no animation.</td></tr>
		<tr><td><a name="showOptions"></a>showOptions</td><td>object</td><td>{}</td>
			<td>For jQuery UI animations you can specify any additional options
				with this setting. For example, the clip animation can
				be set to run horizontally instead of vertically.<br><br>
				<pre><code class="js">$(selector).datepick({showAnim: 'clip',
    showOptions: {direction: 'horizontal'}});</code></pre></td></tr>
		<tr><td><a name="showSpeed"></a>showSpeed</td><td>string or number</td><td>'normal'</td>
			<td>The speed at which the animation runs. Use one of the standard speeds -
				'slow', 'normal', or 'fast' - or specify the duration in milliseconds.<br><br>
				<pre><code class="js">$(selector).datepick({showSpeed: 'fast'});
$(selector).datepick({showSpeed: 1500});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>duration</code>.</td></tr>
		<tr><td><a name="popupContainer"></a>popupContainer</td>
			<td>string or element or jQuery</td><td>null</td>
			<td>The container for the popup datepicker, allowing you to control
				where in the DOM the datepicker is appended. You can provide either
				the element itself, a jQuery collection containing the element,
				or a string selector for the desired element. It defaults to
				the document body.<br><br>
				<pre><code class="js">$(selector).datepick({popupContainer: '#mydiv'});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="alignment"></a>alignment</td><td>string</td><td>'bottom'</td>
			<td>Control the alignment of a popup datepicker with respect to its input field.
				Use one of the following values: 'bottom' for below or 'top' for above,
				both of which are left- or right- aligned depending on the localisation
				preference, or 'topLeft', 'topRight', 'bottomLeft', or 'bottomLeft'.
				The first two options will reposition the datepicker if it does not
				fit in the requested space.<br><br>
				<span class="version">Since 3.7.0</span>.</td></tr>
		<tr><td><a name="fixedWeeks"></a>fixedWeeks</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to always have six weeks shown, or
				<code>false</code> to only show as many weeks as are needed.
				This setting only applies to a datepicker for a single month as all
				<a href="#monthsToShow">multi-month</a> datepickers are always fixed.<br><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="calculateWeek"></a>calculateWeek</td><td>function</td><td>$.datepick. iso8601Week</td>
			<td>A function to calculate the week of the year for a given date.
				The date (Date) is passed as a parameter and the function returns
				a number indicating the corresponding week of the year.
				If set to <code>null</code> the built-in
				<a href="#" onclick="jumpTo('datefns', 'iso8601Week');">ISO 8601</a> calculation is used.
				You should use the <a href="#" onclick="jumpTo('renderers', 'weekOfYearRenderer');">
				<code>weekOfYearRenderer</code></a> to actually display the value.<br><br>
				<pre><code class="js">$(selector).datepick({calculateWeek: myWeek,
    renderer: $.datepick.weekOfYearRenderer});
	
function myWeek(date) {
    return Math.floor(($.datepick.dayOfYear(date) - 1) / 7) + 1;
}</code></pre></td></tr>
		<tr><td><a name="monthsToShow"></a>monthsToShow</td><td>number or number[2]</td><td>1</td>
			<td>The number of months to show in the datepicker. It may be expressed
				as a single number of columns, or as an array of rows and columns.<br><br>
				<pre><code class="js">$(selector).datepick({monthsToShow: 3});
$(selector).datepick({monthsToShow: [2, 3]});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>numberOfMonths</code>.<br>
				<span class="version">Since 4.0.1</span> - mark first and last
				months in each row with classes <code>first</code> and <code>last</code>.</td></tr>
		<tr><td><a name="monthsOffset"></a>monthsOffset</td><td>number or function</td><td>0</td>
			<td>When showing <a href="#monthsToShow">multiple months</a>, this setting
				indicates at which position the current month is shown, starting from
				zero. If specified as a function, it accepts a date as its parameter
				and returns the corresponding offset. The example
				below shows three months with the current one in the middle.<br><br>
				<pre><code class="js">$(selector).datepick({
    monthsToShow: 3, monthsOffset: 1});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>showCurrentAtPos</code>.<br>
				<span class="version">Since 4.0.6</span> - can be a function.</td></tr>
		<tr><td><a name="monthsToStep"></a>monthsToStep</td><td>number</td><td>1</td>
			<td>The number of months to move when the <a href="#" onclick="jumpTo('commandsobj', 'prev');">
				previous</a> or <a href="#" onclick="jumpTo('commandsobj', 'next');">next</a>
				month commands are invoked.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>stepMonths</code>.</td></tr>
		<tr><td><a name="monthsToJump"></a>monthsToJump</td><td>number</td><td>12</td>
			<td>The number of months to move when the <a href="#" onclick="jumpTo('commandsobj', 'prevJump');">
				previous</a> or <a href="#" onclick="jumpTo('commandsobj', 'nextJump');">next</a>
				year commands are invoked.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>stepBigMonths</code>.</td></tr>
		<tr><td><a name="useMouseWheel"></a>useMouseWheel</td><td>boolean</td><td>true</td>
			<td>If the <a href="http://jquery.com/plugins/project/mousewheel">MouseWheel plugin</a>
				is available and this setting is <code>true</code> then you can use the mouse
				wheel to step through the months or years (with the <em>Ctrl</em> key).
				If this setting is <code>false</code> then the mouse wheel has no effect
				within the datepicker, even if the plugin is available.<br><br>
				<span class="version">Since 4.0.3</span>.</td></tr>
		<tr><td><a name="changeMonth"></a>changeMonth</td><td>boolean</td><td>true</td>
			<td>Set to <code>true</code> to allow the month and year to be changed
				via a drop-down selection on the first month shown in the datepicker.
				Set to <code>false</code> to only allow changes via the various
				<a href="#" onclick="jumpTo('commandsobj', 'prev');">previous</a> and
				<a href="#" onclick="jumpTo('commandsobj', 'next');">next</a> commands.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it only affected the month drop-down with <code>changeYear</code>
				controlling the year drop-down.</td></tr>
		<tr><td><a name="yearRange"></a>yearRange</td><td>string</td><td>'c-10:c+10'</td>
			<td>Specify the range of years shown in the year drop-down.
				The setting contains the start and end of the range separated by a colon (:).
				Each limit may be an absolute year ('1980'), an offset from today ('-10' or '+10'),
				or an offset from the currently selected date ('c-5' or 'c+5').
				Place the maximum value first to have the list appear in descending order.
				Set to 'any' to allow direct input of the year without selection
				from a drop-down list. The default is to show 10 years before and
				after the currently selected date.<br><br>
				Note that this setting does not restrict the dates that may be selected.
				You should use the <a href="#minDate"><code>minDate</code></a> and
				<a href="#maxDate"><code>maxDate</code></a> settings to impose limits
				on the dates that may be selected.<br><br>
				<pre><code class="js">$(selector).datepick({yearRange: '1980:2000'});
$(selector).datepick({yearRange: '1960:-18'});
$(selector).datepick({yearRange: 'c+10:c-10'}); // Descending
$(selector).datepick({yearRange: 'any'});</code></pre><br>
				<span class="version">Since 3.7.3</span> - relative to today's year and combinations.<br>
				<span class="version">Since 4.0.0</span> - 'any'.<br>
				<span class="version">Since 4.0.3</span> - descending ranges.</td></tr>
		<tr><td><a name="shortYearCutoff"></a>shortYearCutoff</td><td>string or number</td><td>'+10'</td>
			<td>When a two-digit year format is used (see
				<a href="#" onclick="jumpTo('l10n', 'dateFormat')"><code>dateFormat</code></a>),
				this value helps determine the century for a given date.
				If expressed as a number (0 to 99) it is the year beyond which
				the century should be the last one instead of the current one.
				If expressed as a string, it is converted to a number and added
				to the current year before making the comparison above.
				If set to -1 the year is always in the 1900s.<br><br>
				<span class="version">Since 3.5.2</span> - disable with -1.</td></tr>
		<tr><td><a name="showOtherMonths"></a>showOtherMonths</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to show the days in other months that
				appear in the partial weeks before or after the current month.</td></tr>
		<tr><td><a name="selectOtherMonths"></a>selectOtherMonths</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to allow the days in other months that
				appear in the partial weeks before or after the current month to be selected.
				This setting only applies if <a href="#showOtherMonths"><code>
				showOtherMonths</code></a> is <code>true</code>.<br><br>
				<pre><code class="js">$(selector).datepick({
    showOtherMonths: true, selectOtherMonths: true});</code></pre><br>
				<span class="version">Since 3.5.0</span>.</td></tr>
		<tr><td><a name="defaultDate"></a>defaultDate</td>
			<td>Date or number or string</td><td>null</td>
			<td>Specify the date to show if no other date has been selected.
				This may be specified as an actual date (Date), as a date string in the current
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>,
				as a number of days relative to today,
				or as a string of offsets and periods relative to today.
				For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days.
				Multiple offsets may be combined in the one string.
				Set to <code>null</code> for a default date of today.<br><br>
				<pre><code class="js">$(selector).datepick({
    defaultDate: new Date(2009, 1-1, 26)});
$(selector).datepick({defaultDate: '01/26/2009'});
$(selector).datepick({defaultDate: +7});
$(selector).datepick({defaultDate: '+1m -1d'});</code></pre><br>
				<span class="version">Since 3.7.0</span> - added date string.</td></tr>
		<tr><td><a name="selectDefaultDate"></a>selectDefaultDate</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to automatically select the
				<a href="#defaultDate">defaultDate</a> when no other date has been selected.<br><br>
				<pre><code class="js">$(selector).datepick({
    defaultDate: '01/26/2009', selectDefaultDate: true});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>showDefault</code>.</td></tr>
		<tr><td><a name="minDate"></a>minDate</td>
			<td>Date or number or string</td><td>null</td>
			<td>Specify the minimum date allowed to be selected.
				This may be specified as an actual date (Date), as a date string in the current
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>,
				as a number of days relative to today,
				or as a string of offsets and periods relative to today.
				For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days.
				Multiple offsets may be combined in the one string.
				Set to <code>null</code> for no minimum.<br><br>
				<pre><code class="js">$(selector).datepick({
    minDate: new Date(2008, 12-1, 25)});
$(selector).datepick({minDate: '12/25/2008'});
$(selector).datepick({minDate: -10});
$(selector).datepick({minDate: '-1m -15d'});</code></pre><br>
				<span class="version">Since 3.7.0</span> - added date string.</td></tr>
		<tr><td><a name="maxDate"></a>maxDate</td>
			<td>Date or number or string</td><td>null</td>
			<td>Specify the maximum date allowed to be selected.
				This may be specified as an actual date (Date), as a date string in the current
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>,
				as a number of days relative to today,
				or as a string of offsets and periods relative to today.
				For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days.
				Multiple offsets may be combined in the one string.
				Set to <code>null</code> for no maximum.<br><br>
				<pre><code class="js">$(selector).datepick({
    maxDate: new Date(2009, 12-1, 25)});
$(selector).datepick({maxDate: '12/25/2009'});
$(selector).datepick({maxDate: +10});
$(selector).datepick({maxDate: '+1m +15d'});</code></pre><br>
				<span class="version">Since 3.7.0</span> - added date string.</td></tr>
		<tr><td><a name="autoSize"></a>autoSize</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to resize the input field based on the maximum length of a
				date in the current
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>.
				Set to <code>false</code> to not change the field length.<br><br>
				<span class="version">Since 3.7.1</span>.</td></tr>
		<tr><td><a name="rangeSelect"></a>rangeSelect</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to allow the selection of a date range in the
				datepicker. The first selected date is the start of the range and the
				second selected date is the end of the range.
				A popup datepicker closes automatically on selection of the range end.
				Set to <code>false</code> to select a single date.</td></tr>
		<tr><td><a name="rangeSeparator"></a>rangeSeparator</td><td>string</td><td>' - '</td>
			<td>Specify the separator shown between the two dates in a
				<a href="#rangeSelect">date range</a>.</td></tr>
		<tr><td><a name="multiSelect"></a>multiSelect</td><td>number</td><td>0</td>
			<td>Specify the maximum number of individual separate dates that may be selected
				in the datepicker. Dates may be de-selected by clicked on them a second time.
				A popup datepicker closes automatically on selection of the maximum number allowed.
				Set to <code>0</code> to select a single date.<br><br>
				<span class="version">Since 3.6.0</span>.</td></tr>
		<tr><td><a name="multiSeparator"></a>multiSeparator</td><td>string</td><td>','</td>
			<td>Specify the separator shown between the dates selected in a
				<a href="#multiSelect">multiple date</a> datepicker.<br><br>
				<span class="version">Since 3.6.0</span>.</td></tr>
		<tr><td><a name="onDate"></a>onDate</td><td>function</td><td>null</td>
			<td>Specify a callback function to provide additonal details about individual
				dates shown in the datepicker. The function is called for each date displayed 
				and receives the date as a parameter (Date, with time portion set to 12 noon),
				while <code>this</code> refers to the associated control.
				It returns an object with the following attributes (all optional):<br><br>
				<code>selectable</code> (boolean) true if the date is selectable, false if not;<br><br>
				<code>dateClass</code> (string) any CSS class(es) to apply to this date;<br><br>
				<code>title</code> (string) a tooltip for this date;<br><br>
				<code>content</code> (string) content for this date to replace the basic day number.<br><br>
				<pre><code class="js">$(selector).datepick({
    onDate: function(date) {
        return {content: date.getDate() + '&lt;br>&lt;sub>' +
            $.datepick.dayOfYear(date) + '&lt;/sub>',
            dateClass: 'showDoY'};
    }
});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				<code>beforeShowDay</code> provided similar functionality.<br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.</td></tr>
		<tr><td><a name="onShow"></a>onShow</td><td>function</td><td>null</td>
			<td>Specify a callback function to provide additonal functionality to a datepicker.
				The function is called just before the datepicker is shown and receives the
				completed datepicker division as a jQuery object and the current instance
				settings as parameters, while <code>this</code> refers to the associated
				control. It should update the datepicker division as necessary.
				See the various examples in the <a href="#" onclick="jumpTo('extend', 'extendall');">
				<code>datepick.ext</code></a> module.
				If you need multiple <code>onShow</code> callbacks, use the
				<a href="#" onclick="jumpTo('globals', 'multipleEvents');"><code>multipleEvents</code></a>
				function and pass the relevant handlers to it.<br><br>
				<pre><code class="js">$(selector).datepick({
    onShow: function(picker, inst) {
        picker.find('td:even').addClass('alternate-dates');
    }
});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="onChangeMonthYear"></a>onChangeMonthYear</td><td>function</td><td>null</td>
			<td>Specify a callback function to be notified of changes to the month and year shown
				in a datepicker. The function is called when the month/year changes and receives the
				year and month as parameters, while <code>this</code> refers to the associated control.
				If you need multiple <code>onChangeMonthYear</code> callbacks, use the
				<a href="#" onclick="jumpTo('globals', 'multipleEvents');"><code>multipleEvents</code></a>
				function and pass the relevant handlers to it.<br><br>
				<pre><code class="js">$(selector).datepick({
    onChangeMonthYear: function(year, month) {
        $('#monthYear').text(month + '/' + year);
    }
});</code></pre></td></tr>
		<tr><td><a name="onSelect"></a>onSelect</td><td>function</td><td>null</td>
			<td>Specify a callback function to be notified of date selection in a datepicker.
				The function is called when each date is selected and receives the currently selected
				dates (Date[]) as the parameter, while <code>this</code> refers to the associated control.
				The array is empty if no dates have been selected.
				All dates have their time portion set to 12 noon.
				Note that when the start of a range is selected the dates array
				contains two entries, with both being that starting date.
				If you need multiple <code>onSelect</code> callbacks, use the
				<a href="#" onclick="jumpTo('globals', 'multipleEvents');"><code>multipleEvents</code></a>
				function and pass the relevant handlers to it.<br><br>
				<pre><code class="js">$(selector).datepick({
    onSelect: function(dates) {
        $('#count').text('Selected ' + dates.length + ' date(s)');
        var minDate = dates[0];
        for (var i = 1; i &lt; dates.length; i++) {
            if (dates[i].getTime() < minDate.getTime()) {
                minDate = dates[i];
            }
        }
        $('#minDate').text($.datepick.formatDate(minDate));
    }
});</code></pre><br>
				<span class="version">Since 3.5.2</span> - added Date type parameter.<br>
				<span class="version">Since 4.0.0</span> - <code>dates</code> parameter only.<br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.</td></tr>
		<tr><td><a name="onClose"></a>onClose</td><td>function</td><td>null</td>
			<td>Specify a callback function to be notified of a popup datepicker closing.
				The function is called when the datepicker is closed (by any means)
				and receives the currently selected dates (Date[]) as the
				parameter, while <code>this</code> refers to the associated control.
				The array is empty if no dates have been selected.
				All dates have their time portion set to 12 noon.
				Note that range selections always have two entries,
				with both being the starting date if no end date has been selected.
				If you need multiple <code>onClose</code> callbacks, use the
				<a href="#" onclick="jumpTo('global', 'multipleEvents');"><code>multipleEvents</code></a>
				function and pass the relevant handlers to it.<br><br>
				<pre><code class="js">$(selector).datepick({
    onClose: function(dates) {
        var selected = '';
        for (var i = 0; i &lt; dates.length; i++) {
            selected += ',' + $.datepick.formatDate(dates[i]);
        }
        alert('Selected dates are: ' + selected.substring(1));
    }
});</code></pre><br>
				<span class="version">Since 3.5.2</span> - added Date type parameter.<br>
				<span class="version">Since 4.0.0</span> - <code>dates</code> parameter only.<br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.</td></tr>
		<tr><td><a name="altField"></a>altField</td><td>string or element or jQuery</td><td>null</td>
			<td>Specify another field to be updated in sync with the datepicker selections.
				This and the following setting allow you to automatically show selected dates
				in one format for the user, while maintaining a second field with a more
				useful format for further processing. The alternate field may be specified
				as either the element itself, a jQuery collection containing the element,
				or a string selector for the desired element.<br><br>
				<pre><code class="js">$(selector).datepick({dateFormat: 'DD, MM d, yyyy',
    altField: '#isoDate', altFormat: 'yyyy-mm-dd'});</code></pre></td></tr>
		<tr><td><a name="altFormat"></a>altFormat</td><td>string</td><td>null</td>
			<td>Use in conjunction with the <a href="#altField"><code>altField</code></a>
				setting to automatically maintain two different views of the selected date(s).
				See the <a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>
				setting for the list of possible values.</td></tr>
		<tr><td><a name="constrainInput"></a>constrainInput</td><td>boolean</td><td>true</td>
			<td>Set to <code>true</code> to only allow the entry of characters specified by the
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>,
				or <code>false</code> to allow any characters.</td></tr>
		<tr><td><a name="commandsAsDateFormat"></a>commandsAsDateFormat</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to apply the <a href="#" onclick="jumpTo('datefns', 'formatDate');">
				<code>formatDate</code></a> function to all command
				<a href="#" onclick="jumpTo('l10n', 'l10nall');">display text</a>. This allows
				you to label commands with the dates to which they refer, for example the
				<a href="#" onclick="jumpTo('commandsobj', 'prev');">previous</a> and
				<a href="#" onclick="jumpTo('commandsobj', 'next');">next</a> links
				could show the month to which they move.
				Remember to quote (') any command text you do not want substituted.<br><br>
				<pre><code class="js">$(selector).datepick({commandsAsDateFormat: true,
    prevText: '&lt; M', todayText: 'M y', nextText: 'M &gt;'});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>navigationAsDateFormat</code>.</td></tr>
		<tr><td><a name="commands"></a>commands</td><td>object</td><td>$.datepick. commands</td>
			<td>See the <a href="#" onclick="jumpTo('commandsobj', 'commandsobjall');"><em>
				Commands</em></a> tab for more details.<br><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		</table>
	</div>
	<div id="commandsobj" class="feature">
		<h2><a name="commandsobjall">Datepicker Commands</a></h2>
		<p>The datepicker contains a series of commands that operate upon it, allowing these to
			be customised or new commands added. Each command consists of an object with the
			attributes shown below, and is added to the
			<a href="#" onclick="jumpTo('settings', 'commands');"><code>commands</code></a> setting.
			The <a href="#commandsstd">standard commands</a> are listed below.</p>
		<p><span class="version">Since 4.0.0</span>.</p>
		<table border="0">
		<tr><th>Name</th><th>Type</th><th>Comments</th></tr>
		<tr><td><a name="text"></a>text</td><td>string</td>
			<td>The name of the <a href="#" onclick="jumpTo('l10n', 'l10nall');">localisation setting</a>
				that provides the text value for this command.</td></tr>
		<tr><td><a name="status"></a>status</td><td>string</td>
			<td>The name of the <a href="#" onclick="jumpTo('l10n', 'l10nall');">localisation setting</a>
				that provides the tooltip (status) value for this command.</td></tr>
		<tr><td><a name="keystroke"></a>keystroke</td><td>object</td>
			<td>The keystroke that triggers this command. The object's attributes are:<br><br>
				<code>keyCode</code> (number) the numeric code for the keystroke;<br><br>
				<code>ctrlKey</code> (boolean, optional) <code>true</code> if the <em>Ctrl</em>
				key must be used in conjunction with the above <code>keyCode</code>;<br><br>
				<code>altKey</code> (boolean, optional) <code>true</code> if the <em>Alt</em>
				key must be used in conjunction with the above <code>keyCode</code>;<br><br>
				<code>shiftKey</code> (boolean, optional) <code>true</code> if the <em>Shift</em>
				key must be used in conjunction with the above <code>keyCode</code>.</td></tr>
		<tr><td><a name="enabled"></a>enabled</td><td>function</td>
			<td>The function that indicates whether the command can be invoked at present.
				It takes the current instance settings as a parameter,
				while <code>this</code> is the associated target control.
				It returns <code>true</code> if the command may be executed
				or <code>false</code> if it may not.</td></tr>
		<tr><td><a name="date"></a>date</td><td>function</td>
			<td>The function that provides a target date for this command. For example,
				the target date for the <a href="#prev">previous</a> command is the first day
				of the previous month. It takes the current instance settings as a parameter,
				while <code>this</code> is the associated target control. It returns a Date
				if an appropriate date can be determined or <code>null</code> if not.</td></tr>
		<tr><td><a name="action"></a>action</td><td>function</td>
			<td>The function that implements the action for this command.
				It takes the current instance settings as a parameter,
				while <code>this</code> is the associated target control.</td></tr>
		</table>
		<h3><a name="commandsstd">Standard Commands</a></h3>
		<p>The standard commands defined by the datepicker are shown below
			and are available as <code>$.datepick.commands</code>.
			These may be positioned in the datepicker by including the
			'{link:<em>name</em>}' or '{button:<em>name</em>}' substitution points in the
			<a href="#" onclick="jumpTo('renderers', 'renderersall');">renderer</a> values,
			where <em>name</em> is the command name below. Commands can be invoked on a datepicker with
			the <a href="#" onclick="jumpTo('globals', 'performAction');">performAction</a> command.</p>
		<table border="0">
		<tr><th>Name</th><th>Text</th><th>Status</th><th>Keystroke</th>
			<th>Enabled</th><th>Date</th><th>Action</th></tr>
		<tr><td><a name="prev"></a>prev</td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevText');">prevText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevStatus');">prevStatus</a></td><td>Page Up</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'minDate');">minDate</a></td>
			<td>First day of previous month</td>
			<td>Move to the previous month (depending on the
				<a href="#" onclick="jumpTo('settings', 'monthsToStep');">monthsToStep</a> setting)</td></tr>
		<tr><td><a name="prevJump"></a>prevJump</td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevJumpText');">prevJumpText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevJumpStatus');">prevJumpStatus</a></td><td>Ctrl+Page Up</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'minDate');">minDate</a></td>
			<td>First day of 12 months ago</td>
			<td>Move to 12 months ago (depending on the
				<a href="#" onclick="jumpTo('settings', 'monthsToJump');">monthsToJump</a> setting)</td></tr>
		<tr><td><a name="next"></a>next</td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextText');">nextText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextStatus');">nextStatus</a></td><td>Page Down</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'maxDate');">maxDate</a></td>
			<td>First day of next month</td>
			<td>Move to the next month (depending on the
				<a href="#" onclick="jumpTo('settings', 'monthsToStep');">monthsToStep</a> setting)</td></tr>
		<tr><td><a name="nextJump"></a>nextJump</td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextJumpText');">nextJumpText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextJumpStatus');">nextJumpStatus</a></td><td>Ctrl+Page Down</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'maxDate');">maxDate</a></td>
			<td>First day of 12 months ahead</td>
			<td>Move to 12 months ahead (depending on the
				<a href="#" onclick="jumpTo('settings', 'monthsToJump');">monthsToJump</a> setting)</td></tr>
		<tr><td><a name="current"></a>current</td>
			<td><a href="#" onclick="jumpTo('l10n', 'currentText');">currentText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'currentStatus');">currentStatus</a></td><td>Ctrl+Home</td>
			<td>If not outside <a href="#" onclick="jumpTo('settings', 'minDate');">minDate</a>
				to <a href="#" onclick="jumpTo('settings', 'maxDate');">maxDate</a></td>
			<td>First selected date or today</td>
			<td>Move to the month of the first selected date, or today if no date has been selected</td></tr>
		<tr><td><a name="today"></a>today</td>
			<td><a href="#" onclick="jumpTo('l10n', 'todayText');">todayText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'todayStatus');">todayStatus</a></td><td>Ctrl+Home</td>
			<td>If not outside <a href="#" onclick="jumpTo('settings', 'minDate');">minDate</a>
				to <a href="#" onclick="jumpTo('settings', 'maxDate');">maxDate</a></td>
			<td>Today</td><td>Move to today's month</td></tr>
		<tr><td><a name="clear"></a>clear</td>
			<td><a href="#" onclick="jumpTo('l10n', 'clearText');">clearText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'clearStatus');">clearStatus</a></td><td>Ctrl+End</td>
			<td>Always</td>
			<td>-</td><td>Clear any selected dates and close a popup datepicker</td></tr>
		<tr><td><a name="close"></a>close</td>
			<td><a href="#" onclick="jumpTo('l10n', 'closeText');">closeText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'closeStatus');">closeStatus</a></td><td>Esc</td>
			<td>Always</td>
			<td>-</td><td>Close a popup datepicker</td></tr>
		<tr><td><a name="prevWeek"></a>prevWeek</td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevWeekText');">prevWeekText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevWeekStatus');">prevWeekStatus</a></td><td>Ctrl+Up</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'minDate');">minDate</a></td>
			<td>One week ago</td><td>Move to the previous week</td></tr>
		<tr><td><a name="prevDay"></a>prevDay</td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevDayText');">prevDayText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'prevDayStatus');">prevDayStatus</a></td><td>Ctrl+Left</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'minDate');">minDate</a></td>
			<td>One day ago</td><td>Move to the previous day</td></tr>
		<tr><td><a name="nextDay"></a>nextDay</td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextDayText');">nextDayText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextDayStatus');">nextDayStatus</a></td><td>Ctrl+Right</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'maxDate');">maxDate</a></td>
			<td>One day ahead</td><td>Move to the next day</td></tr>
		<tr><td><a name="nextWeek"></a>nextWeek</td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextWeekText');">nextWeekText</a></td>
			<td><a href="#" onclick="jumpTo('l10n', 'nextWeekStatus');">nextWeekStatus</a></td><td>Ctrl+Down</td>
			<td>If not at the <a href="#" onclick="jumpTo('settings', 'maxDate');">maxDate</a></td>
			<td>One week ahead</td><td>Move to the next week</td></tr>
		</table>
	</div>
	<div id="l10n" class="feature">
		<h2><a name="l10nall">Datepicker Localisation</a></h2>
		<p>These settings comprise the <a href="#" onclick="jumpTo('globals', 'regional');">
			regional settings</a> that may be localised by a
			<a href="datepick.html#l10nPkgs">language package</a>.
			They can be overridden for individual instances:</p>
		<pre><code class="js">$(selector).datepick({prevText: '&lt;'});</code></pre>
		<p class="quickref">
			<a href="#clearStatus">clearStatus</a>&nbsp;|
			<a href="#clearText">clearText</a>&nbsp;|
			<a href="#closeStatus">closeStatus</a>&nbsp;|
			<a href="#closeText">closeText</a>&nbsp;|
			<a href="#currentStatus">currentStatus</a>&nbsp;|
			<a href="#currentText">currentText</a>&nbsp;|
			<a href="#dateFormat">dateFormat</a>&nbsp;|
			<a href="#dayNames">dayNames</a>&nbsp;|
			<a href="#dayNamesMin">dayNamesMin</a>&nbsp;|
			<a href="#dayNamesShort">dayNamesShort</a>&nbsp;|
			<a href="#dayStatus">dayStatus</a>&nbsp;|
			<a href="#defaultStatus">defaultStatus</a>&nbsp;|
			<a href="#firstDay">firstDay</a>&nbsp;|
			<a href="#isRTL">isRTL</a>&nbsp;|
			<a href="#monthNames">monthNames</a>&nbsp;|
			<a href="#monthNamesShort">monthNamesShort</a>&nbsp;|
			<a href="#monthStatus">monthStatus</a>&nbsp;|
			<a href="#nextJumpStatus">nextJumpStatus</a>&nbsp;|
			<a href="#nextJumpText">nextJumpText</a>&nbsp;|
			<a href="#nextStatus">nextStatus</a>&nbsp;|
			<a href="#nextText">nextText</a>&nbsp;|
			<a href="#prevJumpStatus">prevJumpStatus</a>&nbsp;|
			<a href="#prevJumpText">prevJumpText</a>&nbsp;|
			<a href="#prevStatus">prevStatus</a>&nbsp;|
			<a href="#prevText">prevText</a>&nbsp;|
			<a href="#renderer">renderer</a>&nbsp;|
			<a href="#todayStatus">todayStatus</a>&nbsp;|
			<a href="#todayText">todayText</a>&nbsp;|
			<a href="#weekStatus">weekStatus</a>&nbsp;|
			<a href="#weekText">weekText</a>&nbsp;|
			<a href="#yearStatus">yearStatus</a>
		</p>
		<table border="0">
		<tr><th>Name</th><th>Type</th><th>Default</th><th>Comments</th></tr>
		<tr><td><a name="monthNames"></a>monthNames</td><td>string[]</td>
			<td>['January', 'February', 'March', 'April', 'May', 'June',
			'July', 'August', 'September', 'October', 'November', 'December']</td>
			<td>The full names of the months.</td></tr>
		<tr><td><a name="monthNamesShort"></a>monthNamesShort</td><td>string[]</td>
			<td>['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</td>
			<td>The abbreviated names of the months.</td></tr>
		<tr><td><a name="dayNames"></a>dayNames</td><td>string[]</td>
			<td>['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</td>
			<td>The full names of the days of the week, starting from Sunday.</td></tr>
		<tr><td><a name="dayNamesShort"></a>dayNamesShort</td><td>string[]</td>
			<td>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</td>
			<td>The abbreviated names of the days of the week, starting from Sunday.</td></tr>
		<tr><td><a name="dayNamesMin"></a>dayNamesMin</td><td>string[]</td>
			<td>['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</td>
			<td>The minimal names of the days of the week, starting from Sunday.</td></tr>
		<tr><td><a name="dateFormat"></a>dateFormat</td><td>string</td><td>'mm/dd/yyyy'</td>
			<td>Specify the format applied to the selected dates. This may be any combination
				of the values below. To use any of these characters without substitution
				you must surround them in single quotes (').<br><br>
				<ul>
					<li>d - day of the month (no leading zero)</li>
					<li>dd - day of the month (two digit)</li>
					<li>D - day name short</li>
					<li>DD - day name long</li>
					<li>o - day of the year (no leading zeros)</li>
					<li>oo - day of the year (three digits)</li>
					<li>w  - week of year (no leading zero)</li>
					<li>ww - week of year (two digit)</li>
					<li>m - month of the year (no leading zero)</li>
					<li>mm - month of the year (two digit)</li>
					<li>M - month name short</li>
					<li>MM - month name long</li>
					<li>yy - year (two digit)</li>
					<li>yyyy - year (four digit)</li>
					<li>J - Julian date</li>
					<li>@ - Unix timestamp (secs since 01/01/1970)</li>
					<li>! - Windows ticks (100ns since 01/01/0001)</li>
					<li>'...' - literal text</li>
					<li>'' - single quote</li>
				</ul>
				<p>Or you can use one of the predefined formats from the datepicker:</p>
				<ul>
					<li>ATOM - 'yyyy-mm-dd'</li>
					<li>COOKIE - 'D, dd M yyyy'</li>
					<li>FULL - 'DD, MM d, yyyy'</li>
					<li>ISO_8601 - 'yyyy-mm-dd'</li>
					<li>JULIAN - 'J'</li>
					<li>RFC_822 - 'D, d M yy'</li>
					<li>RFC_850 - 'DD, dd-M-yy'</li>
					<li>RFC_1036 - 'D, d M yy'</li>
					<li>RFC_1123 - 'D, d M yyyy'</li>
					<li>RFC_2822 - 'D, d M yyyy'</li>
					<li>RSS - 'D, d M yy'</li>
					<li>TICKS - '!'</li>
					<li>TIMESTAMP - '@'</li>
					<li>W3C - 'yyyy-mm-dd'</li>
				</ul><br>
				<pre><code class="js">$(selector).datepick({dateFormat: 'yyyy-mm-dd'});
$(selector).datepick({dateFormat:
    '\'day\' d \'of\' MM \'in the year\' yyyy'});
$(selector).datepick({dateFormat: $.datepick.FULL});</code></pre></td></tr>
		<tr><td><a name="firstDay"></a>firstDay</td><td>number</td><td>0</td>
			<td>The number of the first day of the week shown in the datepicker,
				with 0 being Sunday, 1 being Monday, etc.</td></tr>
		<tr><td><a name="renderer"></a>renderer</td><td>object</td>
			<td><a href="#" onclick="jumpTo('renderers', 'defaultRenderer');">$.datepick. defaultRenderer</a></td>
			<td>The renderer used to generate the datepicker.
				You can use one of the predefined renderers, define your own,
				or extend an existing one with minor changes.
				See the <a href="#" onclick="jumpTo('renderers', 'renderersall');"><em>Renderers</em></a>
				tab for more details.<br><br>
				<pre><code class="js">$(selector).datepick({
    renderer: $.datepick.weekOfYearRenderer});
$(selector).datepick({
    renderer: $.extend({}, $.datepick.defaultRenderer,
        {picker: $.datepick.defaultRenderer.picker.
            replace(/\{link:clear\}/, '{button:clear}').
            replace(/\{link:close\}/, '{button:close}')})});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="prevText"></a>prevText</td><td>string</td><td>'&lt;Prev'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'prev');">prev</a> command.
				Use the <a href="#" onclick="jumpTo('settings', 'commandsAsDateFormat');">
				<code>commandsAsDateFormat</code></a> setting to format
				the text to show date information.<br><br>
				<pre><code class="js">$(selector).datepick({
    prevText: '&lt; M', commandsAsDateFormat: true});</code></pre></td></tr>
		<tr><td><a name="prevStatus"></a>prevStatus</td><td>string</td><td>'Show the previous month'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'prev');">prev</a> command.</td></tr>
		<tr><td><a name="prevJumpText"></a>prevJumpText</td><td>string</td><td>'&lt;&lt;'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'prevJump');">prevJump</a> command.
				Use the <a href="#" onclick="jumpTo('settings', 'commandsAsDateFormat');">
				<code>commandsAsDateFormat</code></a> setting to format
				the text to show date information.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>prevBigText</code>.</td></tr>
		<tr><td><a name="prevJumpStatus"></a>prevJumpStatus</td><td>string</td><td>'Show the previous year'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'prevJump');">prevJump</a> command.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>prevBigStatus</code>.</td></tr>
		<tr><td><a name="nextText"></a>nextText</td><td>string</td><td>'Next>'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'next');">next</a> command.
				Use the <a href="#" onclick="jumpTo('settings', 'commandsAsDateFormat');">
				<code>commandsAsDateFormat</code></a> setting to format
				the text to show date information.<br><br>
				<pre><code class="js">$(selector).datepick({
    nextText: 'M >', commandsAsDateFormat: true});</code></pre></td></tr>
		<tr><td><a name="nextStatus"></a>nextStatus</td><td>string</td><td>'Show the next month'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'next');">next</a> command.</td></tr>
		<tr><td><a name="nextJumpText"></a>nextJumpText</td><td>string</td><td>'&gt;&gt;'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'nextJump');">nextJump</a> command.
				Use the <a href="#" onclick="jumpTo('settings', 'commandsAsDateFormat');">
				<code>commandsAsDateFormat</code></a> setting to format
				the text to show date information.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>nextBigText</code>.</td></tr>
		<tr><td><a name="nextJumpStatus"></a>nextJumpStatus</td><td>string</td><td>'Show the next year'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'nextJump');">nextJump</a> command.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>nextBigStatus</code>.</td></tr>
		<tr><td><a name="currentText"></a>currentText</td><td>string</td><td>'Current'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'current');">current</a> command.
				Use the <a href="#" onclick="jumpTo('settings', 'commandsAsDateFormat');">
				<code>commandsAsDateFormat</code></a> setting to format
				the text to show date information.</td></tr>
		<tr><td><a name="currentStatus"></a>currentStatus</td><td>string</td><td>'Show the current month'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'current');">current</a> command.</td></tr>
		<tr><td><a name="todayText"></a>todayText</td><td>string</td><td>'Today'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'today');">today</a> command.
				Use the <a href="#" onclick="jumpTo('settings', 'commandsAsDateFormat');">
				<code>commandsAsDateFormat</code></a> setting to format
				the text to show date information.</td></tr>
		<tr><td><a name="todayStatus"></a>todayStatus</td><td>string</td><td>'Show today\'s month'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'today');">today</a> command.</td></tr>
		<tr><td><a name="clearText"></a>clearText</td><td>string</td><td>'Clear'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'clear');">clear</a> command.</td></tr>
		<tr><td><a name="clearStatus"></a>clearStatus</td><td>string</td><td>'Clear all the dates'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'clear');">clear</a> command.</td></tr>
		<tr><td><a name="closeText"></a>closeText</td><td>string</td><td>'Close'</td>
			<td>The display text for the
				<a href="#" onclick="jumpTo('commandsobj', 'close');">close</a> command.</td></tr>
		<tr><td><a name="closeStatus"></a>closeStatus</td><td>string</td><td>'Close the datepicker'</td>
			<td>The tooltip text for the
				<a href="#" onclick="jumpTo('commandsobj', 'close');">close</a> command.</td></tr>
		<tr><td><a name="yearStatus"></a>yearStatus</td><td>string</td><td>'Change the year'</td>
			<td>The tooltip text for the year drop-down.</td></tr>
		<tr><td><a name="monthStatus"></a>monthStatus</td><td>string</td><td>'Change the month'</td>
			<td>The tooltip text for the month drop-down.</td></tr>
		<tr><td><a name="weekText"></a>weekText</td><td>string</td><td>'Wk'</td>
			<td>The display text for the week of the year column header.</td></tr>
		<tr><td><a name="weekStatus"></a>weekStatus</td><td>string</td><td>'Week of the year'</td>
			<td>The tooltip text for the week of the year column header.</td></tr>
		<tr><td><a name="dayStatus"></a>dayStatus</td><td>string</td><td>'Select DD, M d, yyyy'</td>
			<td>The tooltip text for selectable days. The
				<a href="#" onclick="jumpTo('datefns', 'formatDate');"><code>formatDate</code></a>
				function is applied to the value before use.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>dateStatus</code>.</td></tr>
		<tr><td><a name="defaultStatus"></a>defaultStatus</td><td>string</td><td>'Select a date'</td>
			<td>The tooltip text for areas of the datepicker not covered by one of the other statuses above.<br><br>
				<span class="version">Since 4.0.0</span> - previously
				it was <code>initStatus</code>.</td></tr>
		<tr><td><a name="isRTL"></a>isRTL</td><td>boolean</td><td>false</td>
			<td>Set to <code>true</code> to indicate that this language runs right-to-left.</td></tr>
		</table>
	</div>
	<div id="renderers" class="feature">
		<h2><a name="renderersall">Datepicker Renderers</a></h2>
		<p>Renderers allow you to use a templating mechanism to construct the datepicker
			for display. They are assigned to a datepicker instance as the
			<a href="#" onclick="jumpTo('l10n', 'renderer');"><code>renderer</code></a>
			setting, one of the localisation settings.</p>
		<p><span class="version">Since 4.0.0</span>.</p>
		<p>You control the structure of the datepicker, the placement
			of controls within it, and the CSS styling that is applied to it.
			Substitution points of the form '{xxx}' indicate where standard content
			should be inserted.</p>
		<p>There is a default renderer defined in the <code>datepick</code> module
			and several alternative renderers in the <code>datepick.ext</code> module.
			These are all described <a href="#renderersstd">below</a>.</p>
		<p>If you define your own custom render it must contain all of the attributes
			described below. Alternatively you can tweak an existing renderer:</p>
		<pre><code class="js">$(selector).datepick({renderer: $.extend(
    {}, $.datepick.defaultRenderer,
    {picker: $.datepick.defaultRenderer.picker.
        replace(/\{link:today\}/, '{link:current}')})});</code></pre>
		<p class="quickref">
			<a href="#commandButtonClass">commandButtonClass</a>&nbsp;|
			<a href="#commandClass">commandClass</a>&nbsp;|
			<a href="#commandLinkClass">commandLinkClass</a>&nbsp;|
			<a href="#day">day</a>&nbsp;|
			<a href="#dayHeader">dayHeader</a>&nbsp;|
			<a href="#daySelector">daySelector</a>&nbsp;|
			<a href="#defaultClass">defaultClass</a>&nbsp;|
			<a href="#disabledClass">disabledClass</a>&nbsp;|
			<a href="#highlightedClass">highlightedClass</a>&nbsp;|
			<a href="#month">month</a>&nbsp;|
			<a href="#monthSelector">monthSelector</a>&nbsp;|
			<a href="#monthRow">monthRow</a>&nbsp;|
			<a href="#multiClass">multiClass</a>&nbsp;|
			<a href="#otherMonthClass">otherMonthClass</a>&nbsp;|
			<a href="#picker">picker</a>&nbsp;|
			<a href="#rtlClass">rtlClass</a>&nbsp;|
			<a href="#selectedClass">selectedClass</a>&nbsp;|
			<a href="#todayClass">todayClass</a>&nbsp;|
			<a href="#week">week</a>&nbsp;|
			<a href="#weekHeader">weekHeader</a>&nbsp;|
			<a href="#weekendClass">weekendClass</a>
		</p>
		<table border="0">
		<tr><th>Name</th><th>Type</th><th>Comments</th></tr>
		<tr><td></td>
			<td></td>
			<td>The following substitution points may be used anywhere within
				the renderer structure:<br><br>
				'{l10n:<em>name</em>}' to insert the localised value for <em>name</em>;<br><br>
				'{link:<em>name</em>}' to insert a link for command <em>name</em>;<br><br>
				'{button:<em>name</em>}' to insert a button for command <em>name</em>;<br><br>
				'{popup:start}...{popup:end}' to delimit sections that only
				appear in a popup datepicker;<br><br>
				'{inline:start}...{inline:end}'  to delimit sections that only
				appear in an inline datepicker.</td></tr>
		<tr><td><a name="picker"></a>picker</td>
			<td>string</td>
			<td>The overall structure of the datepicker. Use:<br><br>
				'{months}' to insert the generated content for
				all of the shown months.</td></tr>
		<tr><td><a name="monthRow"></a>monthRow</td>
			<td>string</td>
			<td>The structure of a single row of months in the datepicker. Use:<br><br>
				'{months}' to insert the generated content for
				all of the months in that row.</td></tr>
		<tr><td><a name="month"></a>month</td>
			<td>string</td>
			<td>The structure of a single month in the datepicker. Use:<br><br>
				'{monthHeader:<em>dateFormat</em>}' to insert the header for that month
				using the specified <a href="#" onclick="jumpTo('l10n', 'dateFormat');">
				<em>dateFormat</em></a>, which is optional and defaults to 'MM yyyy';<br><br>
				'{weekHeader}' to insert the list of days in a week;<br><br>
				'{weeks}' to insert the generated content for
				all of the weeks in the month.</td></tr>
		<tr><td><a name="weekHeader"></a>weekHeader</td>
			<td>string</td>
			<td>The structure of a single list of days in a week. Use:<br><br>
				'{days}' to insert the generated content for
				all of the days in the week.</td></tr>
		<tr><td><a name="dayHeader"></a>dayHeader</td>
			<td>string</td>
			<td>The structure of a single day header. Use:<br><br>
				'{day}' to insert the generated content for
				the name of the day.</td></tr>
		<tr><td><a name="week"></a>week</td>
			<td>string</td>
			<td>The structure of a single week in a month. Use:<br><br>
				'{days}' to insert the generated content for
				all of the days in that week;<br><br>
				'{weekOfYear}' to insert the generated content for
				the week of the year number.</td></tr>
		<tr><td><a name="day"></a>day</td>
			<td>string</td>
			<td>The structure of a single day in a month. Use:<br><br>
				'{day}' to insert the generated content for the number of the day.
				Selectable days are enclosed in a link (<code>a</code>) while
				non-selectable days are wrapped in a <code>span</code>.</td></tr>
		<tr><td><a name="monthSelector"></a>monthSelector</td>
			<td>string</td>
			<td>The jQuery selector, relative to a wrapper around
				<a href="#picker"><code>picker</code></a>, for a single
				<a href="#month"><code>month</code></a>.</td></tr>
		<tr><td><a name="daySelector"></a>daySelector</td>
			<td>string</td>
			<td>The jQuery selector, relative to a wrapper around
				<a href="#picker"><code>picker</code></a>, for a single
				<a href="#day"><code>day</code></a>.</td></tr>
		<tr><td><a name="rtlClass"></a>rtlClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to a datepicker using a right-to-left language.</td></tr>
		<tr><td><a name="multiClass"></a>multiClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to a datepicker showing more than one month.</td></tr>
		<tr><td><a name="defaultClass"></a>defaultClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to selectable days.</td></tr>
		<tr><td><a name="selectedClass"></a>selectedClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to selected days.</td></tr>
		<tr><td><a name="highlightedClass"></a>highlightedClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to the cursor day.</td></tr>
		<tr><td><a name="todayClass"></a>todayClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to today.</td></tr>
		<tr><td><a name="otherMonthClass"></a>otherMonthClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to days from other months.</td></tr>
		<tr><td><a name="weekendClass"></a>weekendClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to days on weekends.</td></tr>
		<tr><td><a name="commandClass"></a>commandClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to command links or buttons.
				It is also used as a prefix (followed by '-') for an
				additional class based on the command name.</td></tr>
		<tr><td><a name="commandButtonClass"></a>commandButtonClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to command buttons only.</td></tr>
		<tr><td><a name="commandLinkClass"></a>commandLinkClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to command links only.</td></tr>
		<tr><td><a name="disabledClass"></a>disabledClass</td>
			<td>string</td>
			<td>Any CSS class(es) to apply to disabled command links or buttons.</td></tr>
		</table>
		<h3><a name="renderersstd"></a>Standard Renderers</h3>
		<p>The standard renderers are listed below. Each is accessible within
			the <code>$.datepick</code> object via the given name.</p>
		<table border="0">
		<tr><th>Name</th><th>Module</th><th>Comments</th></tr>
		<tr><td><a name="defaultRenderer"></a>defaultRenderer</td><td>datepick</td>
			<td>The standard renderer. Match it with the standard datepicker CSS.</td></tr>
		<tr><td><a name="weekOfYearRenderer"></a>weekOfYearRenderer</td><td>datepick.ext</td>
			<td>The standard renderer enhanced to include a column for week of the year.
				Match it with the standard datepicker CSS.</td></tr>
		<tr><td><a name="themeRollerRenderer"></a>themeRollerRenderer</td><td>datepick.ext</td>
			<td>A renderer using a similar structure to the default one, but with the standard
			<a href="http://jqueryui.com/themeroller"> ThemeRoller</a> classes for styling.
				Match it with one of the ThemeRoller CSS themes.</td></tr>
		<tr><td><a name="themeRollerWeekOfYearRenderer"></a>themeRollerWeekOfYearRenderer</td><td>datepick.ext</td>
			<td>The ThemeRoller renderer enhanced to include a column for week of the year.
				Match it with one of the ThemeRoller CSS themes.</td></tr>
		</table>
	</div>
	<div id="globals" class="feature">
		<h2><a name="globalsall">Datepicker Globals</a></h2>
		<table border="0">
		<tr><th>Name</th><th>Type</th><th>Default</th><th>Comments</th></tr>
		<tr><td><a name="commandsG"></a>commands</td><td>object[]</td>
			<td>See <a href="#" onclick="jumpTo('commandsobj', 'commandsall');"><em>Commands</em></a> tab</td>
			<td>The set of commands for the datepicker and the default value for the
				<a href="#" onclick="jumpTo('settings', 'commands');"><code>commands</code></a> setting.
				Entries are indexed by the command name.
				Each entry is an object with the properties shown on the
				<a href="#" onclick="jumpTo('commandsobj', 'commandsall');"><em>Commands</em></a> tab.<br><br>
				You could, for example, change the keystrokes assigned to certain commands:<br><br>
				<pre><code class="js">var altCommands = $.extend(true, {}, $.datepick.commands); // Clone
altCommands.prevJump.keystroke = {keyCode: 33, altKey: true}; // Alt+PageUp
altCommands.nextJump.keystroke = {keyCode: 34, altKey: true}; // Alt+PageDown

$('#keystrokePicker').datepick({commands: altCommands,
    showTrigger: '#myicon'});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="regional"></a>regional</td><td>object[]</td>
			<td>See <a href="#" onclick="jumpTo('l10n', 'l10nall');"><em>Localisation</em></a> tab</td>
			<td>The set of regional settings for the datepicker fields. Entries are indexed
				by the country/region code with '' providing the default (English) settings.
				Each entry is an object with the properties shown on the
				<a href="#" onclick="jumpTo('l10n', 'l10nall');"><em>Localisation</em></a> tab.
				Language packages load new entries into this array and 
				automatically apply them as global defaults.<br><br>
				<pre><code class="html">&lt;script type="text/javascript"
    src="jquery.datepick-fr.js"&gt;&lt;/script&gt;</code></pre><br>
				If necessary, you can then revert to the default language settings with<br><br>
				<pre><code class="js">$.datepick.setDefaults($.datepick.regional['']);</code></pre><br>
				and apply the language settings to individual fields with code like the following:<br><br>
				<pre><code class="js">$('#frenchDatepicker').datepick($.datepick.regional['fr']);</code></pre><br>
				Check out the list of available <a href="datepick.html#l10nPkgs">
				localisation packages</a>.</td></tr>
		</table>
		<h2><a name="functions">Functions and Commands</a></h2>
		<p class="quickref">
			<a href="#changeDay">changeDay</a>&nbsp;|
			<a href="#changeMonthC">changeMonth</a>&nbsp;|
			<a href="#clearC">clear</a>&nbsp;|
			<a href="#destroy">destroy</a>&nbsp;|
			<a href="#disable">disable</a>&nbsp;|
			<a href="#enable">enable</a>&nbsp;|
			<a href="#errorPlacement">errorPlacement</a>&nbsp;|
			<a href="#getDate">getDate</a>&nbsp;|
			<a href="#hide">hide</a>&nbsp;|
			<a href="#isDisabled">isDisabled</a>&nbsp;|
			<a href="#isSelectable">isSelectable</a>&nbsp;|
			<a href="#multipleEvents">multipleEvents</a>&nbsp;|
			<a href="#option">option</a>&nbsp;|
			<a href="#options">options</a>&nbsp;|
			<a href="#performAction">performAction</a>&nbsp;|
			<a href="#retrieveDate">retrieveDate</a>&nbsp;|
			<a href="#selectDate">selectDate</a>&nbsp;|
			<a href="#setDate">setDate</a>&nbsp;|
			<a href="#setDefaults">setDefaults</a>&nbsp;|
			<a href="#show">show</a>&nbsp;|
			<a href="#showMonth">showMonth</a>
		</p>
		<table border="0">
		<tr><th>Signature</th><th>Returns</th><th>Comments</th></tr>
		<tr><td><a name="setDefaults"></a>$.datepick.setDefaults(settings)</td><td>Datepicker object</td>
			<td>Update the default <a href="#" onclick="jumpTo('settings', 'settingsall');">
				instance settings</a> to use with all datepicker instances.<br><br>
				<code>settings</code> (object) is the collection of new settings.<br><br>
				<pre><code class="js">$.datepick.setDefaults({dateFormat: 'yyyy-mm-dd'});</code></pre></td></tr>
		<tr><td><a name="option"></a>$(selector).datepick('option', settings)</td><td>jQuery object</td>
			<td>Update the <a href="#" onclick="jumpTo('settings', 'settingsall');">instance settings</a>
				for the datepicker instance(s) attached to the given field(s).<br><br>
				<code>settings</code> (object) is the collection of new settings.<br><br>
				<pre><code class="js">$(selector).datepick('option', {firstDay: 1});</code></pre></td></tr>
		<tr><td>$(selector).datepick('option', name, value)</td><td>jQuery object</td>
			<td>Update a <a href="#" onclick="jumpTo('settings', 'settingsall');">setting</a>
				for the datepicker instance(s) attached to the given field(s).<br><br>
				<code>name</code> (string) is the name of the setting;<br><br>
				<code>value</code> (any) is the new value, or <code>null</code> to reset to the default.<br><br>
				<pre><code class="js">$(selector).datepick('option', 'firstDay', 1);</code></pre></td></tr>
		<tr><td><a name="options"></a>$(selector).datepick('options')</td><td>object</td>
			<td>Retrieve the default <a href="#" onclick="jumpTo('settings', 'settingsall');">
				instance settings</a> for all datepicker instances. Change these via the
				<a href="#setDefaults"><code>setDefaults</code></a> function.<br><br>
				<pre><code class="js">var opts = $(selector).datepick('options');</code></pre><br>
				<span class="version">Since 3.5.2</span>.<br>
				<span class="version">Since 4.0.0</span> - previously
				it was part of the 'option' command.</td></tr>
		<tr><td>$(selector).datepick('options', name)</td><td>any</td>
			<td>Retrieve the value of a <a href="#" onclick="jumpTo('settings', 'settingsall');">
				setting</a> for the datepicker instance attached to the first given field.
				Use a name of 'all' to retrieve all of the settings for this field as an object.
				Note that these are only the overridden settings for this instance
				and that the <a href="#setDefaults">global defaults</a> apply otherwise.
				Change settings via the <a href="#option">option</a> command.<br><br>
				<code>name</code> (string) is the name of the setting.<br><br>
				<pre><code class="js">var fd = $(selector).datepick('options', 'firstDay');
var opts = $(selector).datepick('options', 'all');</code></pre><br>
				<span class="version">Since 3.5.2</span>.<br>
				<span class="version">Since 4.0.0</span> - previously
				it was part of the 'option' command.</td></tr>
		<tr><td><a name="destroy"></a>$(selector).datepick('destroy')</td><td>jQuery object</td>
			<td>Remove the datepicker functionality from the given field(s).</td></tr>
		<tr><td><a name="enable"></a>$(selector).datepick('enable')</td><td>jQuery object</td>
			<td>Enable the datepicker for the given field(s) as well as the field itself.</td></tr>
		<tr><td><a name="disable"></a>$(selector).datepick('disable')</td><td>jQuery object</td>
			<td>Disable the datepicker for the given field(s) as well as the field itself.</td></tr>
		<tr><td><a name="isDisabled"></a>$(selector).datepick('isDisabled')</td><td>boolean</td>
			<td>Determine whether the datepicker functionality has been disabled
				for the first of the given field(s).</td></tr>
		<tr><td><a name="show"></a>$(selector).datepick('show')</td><td>jQuery object</td>
			<td>Pop up the datepicker for the given field.</td></tr>
		<tr><td><a name="hide"></a>$(selector).datepick('hide')</td><td>jQuery object</td>
			<td>Hide the datepicker for the given field.</td></tr>
		<tr><td><a name="getDate"></a>$(selector).datepick('getDate')</td>
			<td>Date[]</td>
			<td>Retrieve the currently selected date(s) from the datepicker for the first given field.
				An empty array is returned if no dates are selected.
				All dates have their time portion set to 12 noon.
				A <a href="#" onclick="jumpTo('settings', 'rangeSelect');">date range</a>
				datepicker always returns two dates, being the start and end of the range.<br><br>
				<pre><code class="js">var dates = $(selector).datepick('getDate');</code></pre><br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.</td></tr>
		<tr><td><a name="setDate"></a>$(selector).datepick('setDate', dates)</td><td>jQuery object</td>
			<td>Set the currently selected dates for the given field(s).<br><br>
				<code>dates</code> (Date) is the new date, or (string) the date in the current
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>,
				or (number) the number of days from today, or (string) a series of 
				amounts and periods from today,
				or ([]) an array of any of these formats. Provide an empty array
				to clear all dates or use the <a href="#clearC">clear</a> command.
				Any dates in excess of those allowed by the datepicker are ignored.<br><br>
				<pre><code class="js">$(selector).datepick('setDate', new Date(2009, 1-1, 26));
$(selector).datepick('setDate', '01/26/2009');
$(selector).datepick('setDate', '+1m'); // Today + 1 month
$(selector).datepick('setDate', 7); // Today + 7 days
$(selector).datepick('setDate',
    [new Date(2009, 1-1, 26), '+1m', 7]);</code></pre><br>
				<span class="version">Since 3.7.0</span> - added date string.<br>
				<span class="version">Since 3.7.1</span> - added relative to current.<br>
				<span class="version">Since 3.7.2</span> - omit dates to clear all dates.</td></tr>
		<tr><td>$(selector).datepick('setDate', startDate, endDate)</td><td>jQuery object</td>
			<td>Set the currently selected <a href="#" onclick="jumpTo('settings', 'rangeSelect');">
				date range</a> for the given field(s).<br><br>
				<code>startDate</code> (see above)
				is the starting date for the date range.<br><br>
				<code>endDate</code> (see above) is the ending date for the date range.<br><br>
				<pre><code class="js">$(selector).datepick('setDate',
    new Date(2009, 1-1, 26), new Date(2010, 1-1, 26));
$(selector).datepick('setDate', 7, '+1m');</code></pre></td></tr>
		<tr><td><a name="clearC"></a>$(selector).datepick('clear')</td><td>jQuery object</td>
			<td>Clear the currently selected dates for the given field(s).<br><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="isSelectable"></a>$(selector).datepick('isSelectable', date)</td><td>boolean</td>
			<td>Determine whether a date is selectable for this datepicker.
				It checks against any <a href="#" onclick="jumpTo('settings', 'minDate');">
				<code>minDate</code></a>, <a href="#" onclick="jumpTo('settings', 'maxDate');">
				<code>maxDate</code></a>, and/or <a href="#" onclick="jumpTo('settings', 'onDate');">
				<code>onDate</code></a> options that have been set.<br><br>
				<code>date</code> (Date or string or number, optional) the date to check.
				This may be specified as an actual date (Date), as a date string in the current
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>,
				as a number of days relative to today,
				or as a string of offsets and periods relative to today.
				For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days.
				Multiple offsets may be combined in the one string.
				Omit to use the currently selected date, or today if none selected.<br><br>
				<span class="version">Since 4.0.3</span>.</td></tr>
		<tr><td><a name="performAction"></a>$(selector).datepick('performAction', name)</td><td>jQuery object</td>
			<td>Execute a named <a href="#" onclick="jumpTo('commandsobj', 'commandsstd');">
				command</a> for a datepicker.<br><br>
				<code>name</code> (string) the name of the command.<br><br>
				<pre><code class="js">$(selector).datepick('performAction', 'today');</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="showMonth"></a>$(selector).datepick('showMonth', year, month, day)</td><td>jQuery object</td>
			<td>Change the displayed month to a specified month and year.
				If no month and year are given, today's month is shown.<br><br>
				<code>year</code> (number, optional) the year to show.<br><br>
				<code>month</code> (number, optional) the month (1-12) to show.<br><br>
				<code>day</code> (number, optional) the day to highlight initially -
				if omitted it defaults to the previously highlighted day.<br><br>
				<pre><code class="js">$(selector).datepick('showMonth', 2009, 1);</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="changeMonthC"></a>$(selector).datepick('changeMonth', offset)</td><td>jQuery object</td>
			<td>Change the displayed month by moving a number of months ahead or behind.<br><br>
				<code>offset</code> (number) the number of months to move.<br><br>
				<pre><code class="js">$(selector).datepick('changeMonth', -6);</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="changeDay"></a>$(selector).datepick('changeDay', offset)</td><td>jQuery object</td>
			<td>Change the cursor day by moving a number of days ahead or behind.<br><br>
				<code>offset</code> (number) the number of days to move.<br><br>
				<pre><code class="js">$(selector).datepick('changeDay', -14);</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="retrieveDate"></a>$(selector).datepick('retrieveDate', element)</td>
			<td>Date</td>
			<td>Retrieve the date associated with a particular day element
				(<code>a</code> or <code>span</code>) within a datepicker.<br><br>
				<code>element</code> (element) the day element to extract the date from.<br><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="selectDate"></a>$(selector).datepick('selectDate', element)</td><td>jQuery object</td>
			<td>Select the date associated with a particular day element
				(<code>a</code> or <code>span</code>) within a datepicker.<br><br>
				<code>element</code> (element) the day element to extract the date from.<br><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="multipleEvents"></a>$.datepick.multipleEvents(fns)</td><td>function</td>
			<td>Allow multiple event handlers to be triggered by a single callback.
				The handlers are called in the order specified.<br><br>
				<code>fns</code> (function...) is the collection of event handlers.<br><br>
				<pre><code class="js">$(selector).datepick({
    onShow: $.datepick.multipleEvents(
        $.datepick.changeFirstDay, $.datepick.showStatus)});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="errorPlacement"></a>$.datepick.errorPlacement(error, element)</td><td>-</td>
			<td>Correctly places a validation error message after any trigger button or icon
				(or before it if using a right-to-left localisation). 
				It should be assigned as the <code>errorPlacement</code> setting for the
				<a href="#" onclick="jumpTo('validation', 'validate')"><code>validate</code></a> call.<br><br>
				<span class="version">Since 3.5.1</span> - only available with the validation extension.</td></tr>
		</table>
	</div>
	<div id="datefns" class="feature">
		<h2><a name="datefnsall">Datepicker Date Functions</a></h2>
		<p>There are a number of functions available on the <code>$.datepick</code>
			object to make it easier to work with dates.</p>
		<p class="quickref">
			<a href="#add">add</a>&nbsp;|
			<a href="#dayF">day</a>&nbsp;|
			<a href="#dayOfYear">dayOfYear</a>&nbsp;|
			<a href="#daysInMonth">daysInMonth</a>&nbsp;|
			<a href="#determineDate">determineDate</a>&nbsp;|
			<a href="#formatDate">formatDate</a>&nbsp;|
			<a href="#iso8601Week">iso8601Week</a>&nbsp;|
			<a href="#monthF">month</a>&nbsp;|
			<a href="#newDate">newDate</a>&nbsp;|
			<a href="#parseDate">parseDate</a>&nbsp;|
			<a href="#todayF">today</a>&nbsp;|
			<a href="#yearF">year</a>
		</p>
		<table border="0">
		<tr><th>Signature</th><th>Returns</th><th>Comments</th></tr>
		<tr><td><a name="formatDate"></a>$.datepick.formatDate(format, date, settings)</td>
			<td>string</td>
			<td>Format a date into a string representation.<br><br>
				<code>format</code> (string, optional) is the format to apply, consisting of
				any combination of the specifications below or one of the
				<a href="#predefined">predefined formats</a>. If not specified,
				it uses the default format for all the datepickers.<br><br>
				<ul>
					<li>d - day of month (no leading zero)</li>
					<li>dd - day of month (two digit)</li>
					<li>o - day of year (no leading zeros)</li>
					<li>oo - day of year (three digit)</li>
					<li>D - day name short</li>
					<li>DD - day name long</li>
					<li>w - week of year (no leading zero)</li>
					<li>ww - week of year (two digit)</li>
					<li>m - month of year (no leading zero)</li>
					<li>mm - month of year (two digit)</li>
					<li>M - month name short</li>
					<li>MM - month name long</li>
					<li>yy - year (two digit)</li>
					<li>yyyy - year (four digit)</li>
					<li>J - Julian date (days since January 1, 4713 BCE Greenwich noon)</li>
					<li>@ - Unix timestamp (secs since 01/01/1970)</li>
					<li>! - Windows ticks (100ns since 01/01/0001)</li>
					<li>'...' - literal text</li>
					<li>'' - single quote</li>
				</ul><br>
				<code>date</code> (Date) is the date to format.<br><br>
				<code>settings</code> (object, optional) is any overrides for the
				formatting, being an object with the following attributes - all are optional
				with the default datepicker settings being used if they are not present:<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>dayNames</code> (string[])
				is the full names of the days<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>dayNamesShort</code> (string[])
				is the abbreviated names of the days<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>monthNames</code> (string[])
				is the full names of the months<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>monthNamesShort</code> (string[])
				is the abbreviated names of the months<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>calculateWeek</code> (function)
				is a function to determine the week of the year - it receives a Date
				as a parameter and returns a number being the corresponding week<br><br>
				<pre><code class="js">var f = gc.formatDate('yyyy-mm-dd', date);
var f = gc.formatDate(
    '\'day\' d \'of\' MM \'in the year\' yyyy', date,
    {monthNames: ['1st month', '2nd month', ...]});</code></pre><br>
				<span class="version">Since 3.5.2</span> - added Windows ticks.<br>
				<span class="version">Since 3.7.0</span> - added week of the year.</td></tr>
		<tr><td><a name="parseDate"></a>$.datepick.parseDate(format, value, settings)</td>
			<td>Date</td>
			<td>Convert a string representation into an actual date.
				The date has its time portion set to 12 noon.<br><br>
				<code>format</code> (string) is the format to apply. See the 
				possibilities in the <a href="#formatDate">formatDate</a>
				function, with the following addition:<br><br>
				<ul>
					<li>* - ignore the remainder of the value</li>
				</ul><br>
				<code>value</code> (string) is the string to extract the date from.<br><br>
				<code>settings</code> (object, optional) is any overrides for the
				parsing, being an object with the following attributes - all are optional
				with the default datepicker settings being used if they are not present:<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>dayNames</code> (string[])
				is the full names of the days<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>dayNamesShort</code> (string[])
				is the abbreviated names of the days<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>monthNames</code> (string[])
				is the full names of the months<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>monthNamesShort</code> (string[])
				is the abbreviated names of the months<br><br>
				&nbsp;&nbsp;&nbsp;&nbsp;<code>shortYearCutoff</code> (number or string)
				is the cutoff point for the current or previous century when using the
				shortened year format; if this is a string it is added to the current
				year value, e.g. '+10'<br><br>
				<pre><code class="js">var date = gc.parseDate('yyyy-mm-dd', '2009-01-26');
var date = gc.parseDate(
    '\'day\' d \'of\' MM \'in the year\' yyyy',
    'day 26 of 1st month in the year 2009',
    {monthNames: ['1st month', '2nd month', ...]});</code></pre><br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.</td></tr>
		<tr><td><a name="determineDate"></a>$.datepick.determineDate(dateSpec, defaultDate,
				currentDate, dateFormat, settings)</td><td>Date</td>
			<td>Convert multiple representations of a date into an actual date. The date
				has its time portion set to 12 noon and is always a new date object.<br><br>
				<code>dateSpec</code> (Date) is the date to use or
				(number) is the offset in days from today or
				(string) is the date in the current format or
				(string) is one or more amounts and periods to offset from today.
				For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days,
				e.g. '+1y +1d'. Prefix the value with 'c' to use the <code>currentDate</code>
				as the starting point instead of today.<br><br>
				<code>defaultDate</code> (Date) is the date to use if no other is
				specified. It may be <code>null</code>.<br><br>
				<code>currentDate</code> (Date, optional) is the current date to base
				'c'-style offsets from. Today is used if this is not specified.<br><br>
				<code>dateFormat</code> (string, optional) is the
				<a href="#" onclick="jumpTo('l10n', 'dateFormat');"><code>dateFormat</code></a>
				to use to check the <code>dateSpec</code>. If not specified,
				the default format for all datepickers is used.<br><br>
				<code>settings</code> (object, optional) is any overrides for the formatting.
				See the <a href="#formatDate">formatDate</a> function for more details.<br><br>
				<pre><code class="js">var date = gc.determineDate(+2);
var date = gc.determineDate('+2y -3w',
    gc.newDate(2001, 1, 1));
var date = gc.determineDate('2004-01-26',
    gc.newDate(2001, 1, 26), 'yyyy-mm-dd');</code></pre><br>
				<span class="version">Since 4.0.0</span>.<br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.<br>
				<span class="version">Since 4.0.6</span> - always return a new date.</td></tr>
		<tr><td><a name="daysInMonth"></a>$.datepick.daysInMonth(year, month)</td><td>number</td>
			<td>Calculate the number of days in the given month (1-31).<br><br>
				<code>year</code> (Date) is the date to get the month from or (number) the year.<br><br>
				<code>month</code> (number, optional) is the month (1-12). Omit if <code>year</code> is a Date.<br><br>
				<pre><code class="js">var dim = $.datepick.daysInMonth(2010, 1);
var dim = $.datepick.daysInMonth($.datepick.today());</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="dayOfYear"></a>$.datepick.dayOfYear(year, month, day)</td><td>number</td>
			<td>Calculate the day of the year for a given date (1-366).<br><br>
				<code>year</code> (Date) is the complete date or (number) the year.<br><br>
				<code>month</code> (number, optional) is the month (1-12). Omit if <code>year</code> is a Date.<br><br>
				<code>day</code> (number, optional) is the day. Omit if <code>year</code> is a Date.<br><br>
				<pre><code class="js">var doy = $.datepick.dayOfYear(2010, 12, 25);
var doy = $.datepick.dayOfYear($.datepick.today());</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="iso8601Week"></a>$.datepick.iso8601Week(year, month, day)</td><td>number</td>
			<td>Calculate the week of the year according to the
				<a href="http://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 definition</a> (1-53):
				weeks start on Monday; the first week of the year contains January 4.
				This is the default value for the <a href="#" onclick="jumpTo('settings', 'calculateWeek');">
				calculateWeek</a> setting.<br><br>
				<code>year</code> (Date) is the complete date or (number) the year.<br><br>
				<code>month</code> (number, optional) is the month (1-12). Omit if <code>year</code> is a Date.<br><br>
				<code>day</code> (number, optional) is the day. Omit if <code>year</code> is a Date.<br><br>
				<pre><code class="js">var woy = $.datepick.iso8601Week(2010, 12, 25);
var woy = $.datepick.iso8601Week($.datepick.today());</code></pre></td></tr>
		<tr><td><a name="todayF"></a>$.datepick.today()</td><td>Date</td>
			<td>Return today's date. The date has its time portion set to 12 noon.<br><br>
				<pre><code class="js">var today = $.datepick.today();</code></pre><br>
				<span class="version">Since 4.0.0</span>.<br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.</td></tr>
		<tr><td><a name="newDate"></a>$.datepick.newDate(year, month, day)</td><td>Date</td>
			<td>Create a new date or clone an existing one. The date has its time portion set to 12 noon.<br><br>
				<code>year</code> (Date) is the existing date or (number) the year.<br><br>
				<code>month</code> (number, optional) is the month (1-12). Omit if <code>year</code> is a Date.<br><br>
				<code>day</code> (number, optional) is the day. Omit if <code>year</code> is a Date.<br><br>
				<pre><code class="js">var d = $.datepick.newDate(2010, 1, 26);
var d2 = $.datepick.newDate(d);</code></pre><br>
				<span class="version">Since 4.0.0</span>.<br>
				<span class="version">Since 4.0.4</span> - time portion is 12 noon.</td></tr>
		<tr><td><a name="yearF"></a>$.datepick.year(date, year)</td><td>Date</td>
			<td>Set the year for a date. The updated date is returned.<br><br>
				<code>date</code> (Date) is the date to update.<br><br>
				<code>year</code> (number) is the new year.<br><br>
				<pre><code class="js">$.datepick.year(d, 2001);
var millenium = $.datepick.day($.datepick.month(
    $.datepick.year(d, 2001), 1), 1);</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="monthF"></a>$.datepick.month(date, month)</td><td>Date</td>
			<td>Set the month for a date. The updated date is returned.<br><br>
				<code>date</code> (Date) is the date to update.<br><br>
				<code>month</code> (number) is the new month (1-12).<br><br>
				<pre><code class="js">var dec = $.datepick.month(d, 12);</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="dayF"></a>$.datepick.day(date, day)</td><td>Date</td>
			<td>Set the day of the month for a date. The updated date is returned.<br><br>
				<code>date</code> (Date) is the date to update.<br><br>
				<code>day</code> (number) is the new day of the month.<br><br>
				<pre><code class="js">var first = $.datepick.day(d, 1);</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="add"></a>$.datepick.add(date, amount, period)</td><td>Date</td>
			<td>Add a number of periods to a date. When adding months or years and the
				resulting month has fewer days than the original, the day of the month
				is reduced to the new maximum.<br><br>
				<code>date</code> (Date) is the date to update.<br><br>
				<code>amount</code> (number) is the number of periods to add, which may be negative.<br><br>
				<code>period</code> (string) is the type of period to add: 'y' for years,
				'm' for months, 'w' for weeks, or 'd' for days.<br><br>
				<pre><code class="js">$.datepick.add(d, 2, 'w');
$.datepick.add($.datepick.add(d, 1, 'm'), -1, 'd');</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		</table>
		<p><a name="predefined"></a>There are also several predefined
			<a href="#formatDate">date formats</a> for the datepicker:</p>
		<table border="0">
			<tr><th>Name</th><th>Value</th><th>Comments</th></tr>
			<tr><td>ATOM</td><td>yyyy-mm-dd</td><td>RFC 3339/ISO 8601</td></tr>
			<tr><td>COOKIE</td><td>D, dd M yyyy</td><td></td></tr>
			<tr><td>FULL</td><td>DD, MM d, yyyy</td><td></td></tr>
			<tr><td>ISO_8601</td><td>yyyy-mm-dd</td><td></td></tr>
			<tr><td>JULIAN</td><td>J</td><td></td></tr>
			<tr><td>RFC_822</td><td>D, d M yy</td><td></td></tr>
			<tr><td>RFC_850</td><td>DD, dd-M-yy</td><td></td></tr>
			<tr><td>RFC_1036</td><td>D, d M yy</td><td></td></tr>
			<tr><td>RFC_1123</td><td>D, d M yyyy</td><td></td></tr>
			<tr><td>RFC_2822</td><td>D, d M yyyy</td><td></td></tr>
			<tr><td>RSS</td><td>D, d M yy</td><td>RFC 822</td></tr>
			<tr><td>TICKS</td><td>!</td><td></td></tr>
			<tr><td>TIMESTAMP</td><td>@</td><td></td></tr>
			<tr><td>W3C</td><td>yyyy-mm-dd</td><td>ISO 8601</td></tr>
		</table>
	</div>
	<div id="extend" class="feature">
		<h2><a name="extendall">Datepicker Extensions</a></h2>
		<p>The functions shown below are available through the <code>datepick.ext</code> module.
			There are also several <a href="#" onclick="jumpTo('renderers', 'renderersstd');">
			renderers</a> available from this module.</p>
		<p class="quickref">
			<a href="#changeFirstDay">changeFirstDay</a>&nbsp;|
			<a href="#highlightWeek">highlightWeek</a>&nbsp;|
			<a href="#hoverCallback">hoverCallback</a>&nbsp;|
			<a href="#monthNavigation">monthNavigation</a>&nbsp;|
			<a href="#monthOnly">monthOnly</a>&nbsp;|
			<a href="#noWeekends">noWeekends</a>&nbsp;|
			<a href="#selectMonth">selectMonth</a>&nbsp;|
			<a href="#selectWeek">selectWeek</a>&nbsp;|
			<a href="#showStatus">showStatus</a>
		</p>
		<table border="0">
		<tr><th>Signature</th><th>Returns</th><th>Comments</th></tr>
		<tr><td><a name="noWeekends"></a>$.datepick.noWeekends</td><td>object</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onDate');">
				onDate</a> setting to not allow the selection of days on weekends.<br><br>
				<pre><code class="js">$(selector).datepick({
    onDate: $.datepick.noWeekends});</code></pre></td></tr>
		<tr><td><a name="changeFirstDay"></a>$.datepick.changeFirstDay</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to allow the first day of the week to be changed
				by clicking on the day column headers.<br><br>
				<pre><code class="js">$(selector).datepick({
    onShow: $.datepick.changeFirstDay});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was the <code>changeFirstDay</code> setting.</td></tr>
		<tr><td><a name="hoverCallback"></a>$.datepick.hoverCallback(onHover)</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to provide a callback when hovering over a day.<br><br>
				<code>onHover</code> (function) is the callback function that receives the 
				current date (Date) and a flag (boolean)
				indicating selectability as parameters on entry, and no parameters on exit,
				while <code>this</code> refers to the target input or division/span.<br><br>
				<pre><code class="js">$(selector).datepick({
    onShow: $.datepick.hoverCallback(showHover)});
	
function showHover(date, selectable) {
    $('#hoverOutput').text(
        (selectable ? $.datepick.formatDate(date) : null) || 'nothing');
}</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was the <code>onHover</code> setting.</td></tr>
		<tr><td><a name="highlightWeek"></a>$.datepick.highlightWeek</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to highlight the entire week when hovering over a day.<br><br>
				<pre><code class="js">$(selector).datepick({
    onShow: $.datepick.highlightWeek});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was the <code>highlightWeek</code> setting.</td></tr>
		<tr><td><a name="monthOnly"></a>$.datepick.monthOnly</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to only allow selection of a month as a whole.
				The date returned is the first day of the chosen month.<br><br>
				<pre><code class="js">$(selector).datepick({
    onShow: $.datepick.monthOnly});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="showStatus"></a>$.datepick.showStatus</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to show a status bar beneath the month(s)
				and to redirect tooltip information to that area.<br><br>
				<pre><code class="js">$(selector).datepick({
    onShow: $.datepick.showStatus});</code></pre><br>
				<span class="version">Since 4.0.0</span> - previously
				it was the <code>showStatus</code> setting.</td></tr>
		<tr><td><a name="monthNavigation"></a>$.datepick.monthNavigation</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to include links for each month and surrounding years
				above the month header to simplify navigation between months/years.<br><br>
				<pre><code class="js">$(selector).datepick({changeMonth: false,
    onShow: $.datepick.monthNavigation});</code></pre><br>
				<span class="version">Since 4.0.2</span>.</td></tr>
		<tr><td><a name="selectWeek"></a>$.datepick.selectWeek</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to select the entire week when the associated
				week of the year entry is selected. You must use the
				<a href="#" onclick="jumpTo('renderers', 'weekOfYearRenderer');">
				<code>weekOfYearRenderer</code></a> or
				<a href="#" onclick="jumpTo('renderers', 'themeRollerWeekOfYearRenderer');">
				<code>themeRollerWeekOfYearRenderer</code></a> for this to work,
				and the datepicker should be set as a
				<a href="#" onclick="jumpTo('settings', 'rangeSelect');">date range</a>.<br><br>
				<pre><code class="js">$(selector).datepick({rangeSelect: true,
    renderer: $.datepick.weekOfYearRenderer,
    onShow: $.datepick.selectWeek});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		<tr><td><a name="selectMonth"></a>$.datepick.selectMonth</td><td>-</td>
			<td>Attach this function to the <a href="#" onclick="jumpTo('settings', 'onShow');">
				onShow</a> setting to select the entire month when the
				week of the year column header is selected. You must use the
				<a href="#" onclick="jumpTo('renderers', 'weekOfYearRenderer');">
				<code>weekOfYearRenderer</code></a> or
				<a href="#" onclick="jumpTo('renderers', 'themeRollerWeekOfYearRenderer');">
				<code>themeRollerWeekOfYearRenderer</code></a> for this to work,
				and the datepicker should be set as a
				<a href="#" onclick="jumpTo('settings', 'rangeSelect');">date range</a>.<br><br>
				<pre><code class="js">$(selector).datepick({rangeSelect: true,
    renderer: $.datepick.weekOfYearRenderer,
    onShow: $.datepick.selectMonth});</code></pre><br>
				<span class="version">Since 4.0.0</span>.</td></tr>
		</table>
	</div>
	<div id="validation" class="feature">
		<h2><a name="validate"></a>Validation Integration</h2>
		<p>The datepicker can be integrated with Jörn Zaefferer's
			<a href="http://plugins.jquery.com/project/validate">validation plugin</a> by
			adding the <code>jquery.datepick.validation.js</code> extension to your page.</p>
		<p><span class="version">Since 3.5.1</span>.<br>
			<span class="version">Since 4.0.5</span> - combined validation rules into <code>dpDate</code>;
			previously there were also <code>dpMinDate</code>, <code>dpMaxDate</code>,
			and <code>dpMinMaxDate</code>, added <code>dpCompareDate</code> rule.</p>
		<p>One new validation is defined (<code>dpDate</code>). It automatically handles date ranges
			(including checking that the start date is not after the end date) and multiple dates,
			checks against any <code>minDate</code> and/or <code>maxDate</code> settings,
			and calls any <code>onDate</code> callback to verify selectability.
			It may be added as a class to your datepicker fields, or may
			be defined in the <code>validate</code> settings.</p>
		<p>A second validation rule (<code>dpCompareDate</code>) lets you compare one date
			field with another date. This rule must be specified in the <code>rules</code>
			section of the <code>validate</code> call and be provided with a parameter to
			indicate the required comparison and the target date. Specify the comparison
			with any of the following: 'equal', 'eq', 'same', 'notEqual', 'ne', 'notSame',
			'lessThan', 'lt', 'before', 'greaterThan', 'gt', 'after', 'notLessThan', 'ge',
			'notBefore', 'notGreaterThan', 'le', 'notAfter'. Specify the target date as either
			the actual date (as a string in the current date format or a <code>Date</code>
			object), as 'today', or as another datepicker field (as a jQuery selector,
			jQuery collection, or DOM element). The two parameters can be combined into one
			string (if the latter is a string), be given as items in an array, or be given
			as an object with a single attribute named for the comparison and with a value
			of the target.</p>
		<pre><code class="js">$('form').validate({
	rules: {
		field1: {
			dpCompareDate: 'before 12/25/2010'
		},
		field2: {
			dpCompareDate: ['ne', new Date(2010, 12 - 1, 25)]
		},
		field3: {
			dpCompareDate: {notLessThan: '#otherField'}
		}
	});</code></pre>
		<p>There is also a custom <code>errorPlacement</code> function defined so that
			the error messages appear after any trigger button or icon
			(or before it if using a right-to-left localisation).</p>
		<p>You can customise the error messages via the datepicker defaults:
			<code>$.datepick.<a href="#" onclick="jumpTo('global', 'setDefaults')">setDefaults</a>({...})</code>.
			The message fields are <code>validateDate</code>, <code>validateDateMin</code>,
			<code>validateDateMax</code>, <code>validateDateMinMax</code>,
			<code>validateDateCompare</code>, <code>validateDateToday</code>, <code>validateDateOther</code>,
			<code>validateDateEQ</code>, <code>validateDateNE</code>, <code>validateDateLT</code>,
			<code>validateDateGT</code>, <code>validateDateLE</code>, and <code>validateDateGE</code>.
			Within these messages '{<em>n</em>}' mark substitution points.</p>
		<p>The sample page below show how the validations would be used.
			It defines three datepicker fields: one plain, one a date range, and
			one with a maximum limit. The validations are applied to the first and
			last by including the <code>dpDate</code> class on the fields.
			For the middle one the validation is defined in the <code>validate</code>
			call on the form, along with a <code>required</code> setting.
			Also note that a custom message is defined for the date range field.</p>
		<pre><code class="html">&lt;head&gt;
&lt;style type="text/css"&gt;@import "css/jquery.datepick.css";&lt;/style&gt;
&lt;script type="text/javascript" src="js/jquery-1.4.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.validate.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.datepick.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.datepick.validation.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function() {
	$('#favDate').datepick();
	$('#holidayDates').datepick({rangeSelect: true});
	$('#birthDate').datepick({maxDate: 0});

	$('#validateForm').validate({
		errorPlacement: $.datepick.errorPlacement,
		rules: {
			holidayDates: {
				required: true,
				dpDate: true
			}
		},
		messages: {
			holidayDates: 'Please enter a valid date range'
		}
	});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;form id="validateForm"&gt;
		&lt;p&gt;Favourite date: &lt;input type="text" id="favDate"
			name="favDate" size="10" class="dpDate"/&gt;&lt;/p&gt;
		&lt;p&gt;Period of last holiday: &lt;input type="text" id="holidayDates"
			name="holidayDates" size="24"/&gt;&lt;/p&gt;
		&lt;p&gt;Date of birth: &lt;input type="text" id="birthDate"
			name="birthDate" size="10" class="dpDate"/&gt;&lt;/p&gt;
	&lt;/form&gt;
&lt;/body&gt;</code></pre>
	</div>
	<div id="compat" class="feature">
		<h2><a name="compatall"></a>Compatibility</h2>
		<p>Version <span class="version">4.0.0</span> is a major update to the datepicker.
			As such, several compatibility issues arise when upgrading from version
			<span class="version">3.7.x</span>:</p>
		<ul>
			<li><code>dateFormat</code> years have changed: use 'yy' for two digit year
				or 'yyyy' for four digit year.</li>
			<li><code>showOn</code>, <code>buttonText</code>, <code>buttonImage</code>, and
				<code>buttonImageOnly</code> settings are replaced by
				<code>showOnFocus</code> and <code>showTrigger</code> settings.
				<pre><code class="js">$(selector).datepick({showOn: 'button'});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({showOnFocus: false, showTrigger: '&lt;button>...&lt;/button>'});</code></pre>
				and
				<pre><code class="js">$(selector).datepick({showOn: 'both', buttonImage: 'img/mycal.gif', buttonImageOnly: true});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({showTrigger: '&lt;img src="img/mycal.gif" alt="...">&lt;/img>'});</code></pre></li>
			<li><code>duration</code> setting is replaced by the <code>showSpeed</code> setting.</li>
			<li><code>numberOfMonths</code> setting is replaced by the <code>monthsToShow</code>
				setting and <code>showCurrentAtPos</code> setting is replaced by the
				<code>monthsOffset</code> setting.</li>
			<li><code>stepMonths</code> setting is replaced by the <code>monthsToStep</code>
				setting and <code>stepBigMonths</code> setting is replaced by the
				<code>monthsToJump</code> setting.</li>
			<li><code>changeYear</code> setting is no longer available while the
				<code>changeMonth</code> setting now controls both drop-downs.</li>
			<li><code>showDefault</code> setting is replaced by the
				<code>selectDefaultDate</code> setting.</li>
			<li><code>closeAtTop</code>, <code>gotoCurrent</code>, <code>mandatory</code>,
				<code>showBigPrevNext</code>, and <code>showMonthAfterYear</code>
				settings are no longer available but the same
				functionality can be achieved with the <code>renderer</code> setting.</li>
			<li><code>hideIfNoPrevNext</code> setting is no longer available
				but the same functionality can be achieved with the <code>pickerClass</code>
				setting and some CSS.</li>
			<li><code>navigationAsDateFormat</code> setting is replaced by the
				<code>commandsAsDateFormat</code> setting.</li>
			<li><code>onClose</code> and <code>onSelect</code> functions only receive an
				array of <code>Date</code> objects as a parameter.</li>
			<li><code>appendText</code> setting is no longer available but the same
				functionality can be achieved using normal jQuery.</li>
			<li><code>useThemeRoller</code> setting is no longer available
				but the same functionality can be achieved with the <code>renderer</code>
				setting and the <code>themeRollerRenderer</code> object in the extension module.
				<pre><code class="js">$(selector).datepick({useThemeRoller: true});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({renderer: $.datepick.themeRollerRenderer});</code></pre></li>
			<li><code>beforeShowDay</code> setting is replaced by <code>onDate</code> setting
				and returns an object with attributes instead of an array.
				<pre><code class="js">$(selector).datepick({beforeShowDay: highlightDays});

function highlightDays(date) {
	return [true, 'highlight', 'tooltip'];
}</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({onDate: highlightDays});

function highlightDays(date) {
	return {selectable: true, dateClass: 'highlight', title: 'tooltip'};
}</code></pre></li>
			<li><code>beforeShow</code> setting is no longer available but similar functionality
				can be achieved by using the <code>option</code> command at an earlier time.</li>
			<li><code>changeFirstDay</code> setting is no longer available but the same
				functionality can be achieved with the <code>onShow</code> setting
				and the <code>changeFirstDay</code> function in the extension module.
				<pre><code class="js">$(selector).datepick({changeFirstDay: true});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({onShow: $.datepick.changeFirstDay});</code></pre></li>
			<li><code>showWeeks</code> setting is no longer available but the same
				functionality can be achieved with the <code>renderer</code> setting
				and the <code>weekOfYearRenderer</code> object in the extension module.
				<pre><code class="js">$(selector).datepick({showWeeks: true});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({renderer: $.datepick.weekOfYearRenderer});</code></pre></li>
			<li><code>highlightWeek</code> setting is no longer available but the same
				functionality can be achieved with the <code>onShow</code> setting
				and the <code>highlightWeek</code> function in the extension module.
				<pre><code class="js">$(selector).datepick({highlightWeek: true});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({onShow: $.datepick.highlightWeek});</code></pre></li>
			<li><code>onHover</code> setting is no longer available but the same
				functionality can be achieved with the <code>onShow</code> setting
				and the <code>hoverCallback</code> function in the extension module.
				<pre><code class="js">$(selector).datepick({onHover: hoveringOver});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({onShow: $.datepick.hoverCallback(hoveringOver)});</code></pre></li>
			<li><code>showStatus</code> setting is no longer available but the same
				functionality can be achieved with the <code>onShow</code> setting
				and the <code>showStatus</code> function in the extension module.
				<pre><code class="js">$(selector).datepick({showStatus: true});</code></pre>
				becomes
				<pre><code class="js">$(selector).datepick({onShow: $.datepick.showStatus});</code></pre></li>
			<li>Opening the datepicker in a dialog is no longer available but the same
				functionality can be achieved by combining the datepicker with the
				<a href="http://jqueryui.com/demos/dialog/">jQuery UI Dialog</a> plugin.</li>
		</ul>
	</div>
</div>
<p>Contact <a href="index.html">Keith Wood</a> at kbwood{at}iinet.com.au 
	with comments or suggestions.</p>
<hr>
<p>
	<a id="valid" href="http://validator.w3.org/check?uri=http://keith-wood.name/datepickRef.html">
		<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"></a>
</p>
</body>
</html>
